<template>
	<view class="page-body">
		<view class="fixTop">
		    <button @click="showPopup">目录</button>
		</view>
		<image :src="imgSrc" mode="aspectFit" :draggable="false"></image>
		<view class="buttons">
			<button type="default" @click="prePage" :disabled="pageNumber <= 2">上一页</button>
			<button type="default" @click="playMp3" >播放</button>
			<button type="default" @click="stopMp3" >暂停</button>
			<button type="default" @click="nextPage" :disabled="pageNumber >= pageTotal">下一页</button>
		</view>
		<uni-popup ref="popup" @close="closePopup">
		  <view class="popup-content">
		    <view @click="goPage(2)">Unit 1</view>
		    <view @click="goPage(14)">Unit 2</view>
		    <view @click="goPage(26)">Unit 3</view>
		    <view @click="goPage(38)">Unit 4</view>
		    <view @click="goPage(50)">Unit 5</view>
		    <view @click="goPage(62)">Unit 6</view>
			<view @click="goPage(74)">Review</view>
			<view @click="goPage(80)">Words</view>
			<view @click="goPage(83)">Vocabulary</view>
		  </view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config';
	  
	const pageStart = 1;
	const baseUrl = config.baseUrl;
	
	const mapMp3 = {
			4:	"eed805bfc82877f6361891b3010860a6",
			5:	"eed805bfc82877f6361891b3010860a6",
			6:	"c8a1b3240fb28ca9b9e56be501d111be.mp3",
			7:	"c8a1b3240fb28ca9b9e56be501d111be.mp3",
			8:	"ca6787f31e50359d0435fe78ca897bb8",
			9: 	"ca6787f31e50359d0435fe78ca897bb8",
			10:	"d39b9a693015211066dec13c40b41baa",
			11:	"d39b9a693015211066dec13c40b41baa",
			12:	"d39b9a693015211066dec13c40b41baa",

			16:	"094562ba54d204a2218dd845a19fb203",
			17:	"094562ba54d204a2218dd845a19fb203",
			18:	"23475e6e8e467c08952a4f4befe97d5d",
			19:	"23475e6e8e467c08952a4f4befe97d5d",
			20:	"e296e79c8ca987f32128e53da277caef",
			21:	"e296e79c8ca987f32128e53da277caef",
			22:	"b0f8a81f99588645c986a106ba8a0a14",
			23:	"b0f8a81f99588645c986a106ba8a0a14",
			24:	"b0f8a81f99588645c986a106ba8a0a14",

			28:	"134f939ac38fffa8f59122ddec34cb0b",
			29:	"134f939ac38fffa8f59122ddec34cb0b",
			30:	"4e663a1890c2cdebb505d43dce7f7e57",
			31:	"4e663a1890c2cdebb505d43dce7f7e57",
			32:	"09499bb1907951d868efb34f1aac2a6b",
			33:	"09499bb1907951d868efb34f1aac2a6b",
			34:	"d6e9383da59acfda3daaa044d0a15572",
			35:	"d6e9383da59acfda3daaa044d0a15572",
			36:	"d6e9383da59acfda3daaa044d0a15572",

			40:	"a1d1b08a271bb46ca5e08381c2bf4caa",
			41:	"a1d1b08a271bb46ca5e08381c2bf4caa",
			42:	"d45c8efac40a2a712f1e79a40d3d8751",
			43:	"d45c8efac40a2a712f1e79a40d3d8751",
			44:	"150cf04aaf0aaab43cd23732845fb1a3",
			45:	"150cf04aaf0aaab43cd23732845fb1a3",
			46:	"8cf6749251570dbf7cdc340bbfc6a905",
			47:	"8cf6749251570dbf7cdc340bbfc6a905",
			48:	"8cf6749251570dbf7cdc340bbfc6a905",

			52:	"379a7b0853b71def1733b517dc6a5863",
			53:	"379a7b0853b71def1733b517dc6a5863",
			54:	"01900e0a885195f03b215892eb7f6800",
			55:	"01900e0a885195f03b215892eb7f6800",
			56:	"220ca67e1c6f61a58b93aee9bd629951",
			57:	"220ca67e1c6f61a58b93aee9bd629951",
			58:	"c7836be5f3ae80263d4a28822f8942c9",
			59:	"c7836be5f3ae80263d4a28822f8942c9",
			60:	"c7836be5f3ae80263d4a28822f8942c9",

			64:	"4bf6bca1c79803e1505f1971ac2fcc9a",
			65:	"4bf6bca1c79803e1505f1971ac2fcc9a",
			66:	"d88b29b0f6772509122733a30d127997",
			67:	"d88b29b0f6772509122733a30d127997",
			68: "12382a285d862756f0358efd82c9ddba",
			69: "12382a285d862756f0358efd82c9ddba",
			70: "13bf188aee6321ce69d72ebf6447378f",
			71: "13bf188aee6321ce69d72ebf6447378f",
			72: "13bf188aee6321ce69d72ebf6447378f"
	};
	export default {
		data() {
			return {
				//pageStart: 2,
				pageNumber : 2,
				pageTotal : 73,
				player: uni.createInnerAudioContext()
			}
		},
		computed: {
			imgSrc : function(){
				return baseUrl + "/images/"+this.pageNumber+".jpg";
			},
			playerSrc: function(){
				return baseUrl + "/mp3/"+mapMp3[this.pageNumber];
			}
		},
		methods: {
			nextPage(){
				this.pageNumber++;
				if(this.pageNumber==this.pageTotal){
					this.$modal.msg("已经是最后一页了")
				}
			},
			prePage(){
				this.pageNumber--;
				if(this.pageNumber == pageStart){
					this.$modal.msg("已经是首页了")
				}
			},
			goPage(pNum){
				this.pageNumber = pNum;
			},
			playMp3(){
				if(mapMp3[this.pageNumber]){
					this.player.pause();
					this.player.src=this.playerSrc;
					//this.player.load()
					this.player.play();
				}else{
					this.$modal.msgError("没有对应音频")
				}
			},
			stopMp3(){
				this.player.pause();
			},
			showPopup() {
			  //this.show = true;
			  this.$refs.popup.open('top')
			},
			closePopup() {
			  //this.show = false;
			  this.$refs.popup.close()
			},
			goPage(pNum) {
			  console.log("执行操作" + pNum);
			  //this.show = false;
			  this.$refs.popup.close()
			  this.pageNumber = pNum;
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	.page-body {
		/* padding: 5px; */
		/* min-width: 320px; */
		margin: 0;
		background: #f2f2f2;
		overflow-x: hidden;
		height: 100%;
		-webkit-tap-highlight-color: transparent;
	}
	.page-body uni-image{
		height: 100%;
		width: 100%;
		margin-top: -25rpx;
	}
	.buttons{
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.buttons uni-button{
		flex: 1;
		background: rgba(0, 0, 0, 0);//设置背景色
	}
	.fixTop {
		z-index: 10;
		position: fixed;
		top: 70rpx;
		/* float: right; */
	}
	.popup-content {
	  background-color: #F9F9ED;
	  border-radius: 8rpx;
	  padding: 16rpx;
	  font-weight: 600;
	  color: #1F1F1F;
	  uni-view{
		  margin-top: 25rpx;
		  text-align: center;
	  }
	}
</style>